<template>
  <div class="Informations">
    <a-card class="sendInfo" v-if="!isSend">
      <div class="textArea" v-clickoutside="() => editInfo(false)">
        <a-input :placeholder="$t('informations.send_message')" id="cal1" @focus="editInfo(true)" v-if="!editShow"></a-input>
        <template v-else>
          <a-textarea v-model="content"></a-textarea>
          <p><a-button @click="sendMessage">{{$t('informations.send_manager')}}</a-button><a-button type="primary" @click="sendMessage('HR')">{{$t('informations.send_hr')}}</a-button></p>
        </template>
      </div>
    </a-card>
    <a-card class="infoList">
      <h4>{{$t('informations.earlier_message')}}</h4>
      <informations-item :isSend="isSend" v-for="record in messageList" :key="record.id" :record="record" :enterpriseId="enterpriseId" @reply="reply"/>
      <p class="more">
        <a-spin v-if="more" />
        <a v-else-if="mesgCount > messageList.length" @click="getMore">{{$t('informations.more_message')}}</a>
        <span v-else>{{$t('informations.no_message')}}~</span>
      </p>
    </a-card>
  </div>
</template>
<script>
import InformationsItem from '@/components/Common/InformationsItem'
export default {
  name: 'Informations',
  props: [ 'messageList', 'enterpriseId', 'mesgCount', 'more', 'isSend' ],
  components: { InformationsItem },
  data () {
    return {
      editShow: false,
      content: ''
    }
  },
  methods: {
    getMore () {
      this.$emit('getMessageList', true)
    },
    reply () {
      this.$emit('getMessageList')
    },
    sendMessage (user) {
      this.$emit('sendMessage', { content: this.content, user })
      this.content = ''
    },
    editInfo (flag) {
      this.editShow = flag
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '../../styles/var.styl'
.Informations
  .sendInfo
    :global(.ant-input)
      resize:none
      border none
      &:hover
        border none!important
        box-shadow none
      &:focus
        border none!important
        box-shadow none
    .textArea
      border-radius 4px
      border 1px solid borderColor
      textarea
        min-height 75px
      >p
        text-align right
        padding 6px
        button
          margin-left 6px
  .infoList
    margin-top 12px
    h4
      padding-bottom 6px
      border-bottom 1px solid borderColor
      font-weight bold
    .info
      &:last-child
        border none
  .more
    text-align center
    padding 12px 0 0
</style>
